<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="header" style="width: 100%">
      <span>
        <el-icon color="#3B98F7" :size="25" style="top: 5px">
          <Cpu style="font-size: 25px" />
        </el-icon>
      </span>
      <span class="header-title"> 常用功能 </span>
    </div>
    <el-row :gutter="25" class="fun-ico-row">
      <el-col :span="6" :offset="0" class="fun-ico-col">
        <div class="fun-ico-box bg-orange">
          <el-icon color="#ffffff" :size="25">
            <Checked style="font-size: 25px" />
          </el-icon>
        </div>
        <div>快捷菜单</div>
      </el-col>
      <el-col :span="6" :offset="0" class="fun-ico-col">
        <div class="fun-ico-box bg-green">
          <el-icon color="#ffffff" :size="25">
            <Calendar style="font-size: 25px" />
          </el-icon>
        </div>

        <div>快捷菜单</div>
      </el-col>
      <el-col :span="6" :offset="0" class="fun-ico-col">
        <div class="fun-ico-box bg-blue">
          <el-icon color="#ffffff" :size="25">
            <Histogram style="font-size: 25px" />
          </el-icon>
        </div>
        <div>快捷菜单</div>
      </el-col>
      <el-col :span="6" :offset="0" class="fun-ico-col">
        <div class="fun-ico-box bg-purple">
          <el-icon color="#ffffff" :size="25">
            <PhoneFilled style="font-size: 25px" />
          </el-icon>
        </div>
        <div>快捷菜单</div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { Checked, Calendar, Histogram, PhoneFilled } from "@element-plus/icons-vue";
</script>

<style lang="scss" scoped>
.pt20 {
  padding-top: 20px;
}

.header-title {
  font-size: 16px;
  color: #101010;
  font-weight: 600;
}

.header-description {
  font-size: 14px;
  color: #a3a3a3;
}

.fun-ico-row {
  padding: 15px 20px 0 20px;
}

.fun-ico-box {
  width: 45px;
  height: 45px;
  border-radius: 5px;
  text-align: center;
  padding-top: 10px;
}

.fun-ico-col div {
  padding-top: 10px;
}

.bg-orange {
  background-color: #e46217;
}

.bg-green {
  background-color: #39bf13;
}

.bg-blue {
  background-color: #19b8f5;
}

.bg-purple {
  background-color: #3d4fcf;
}
</style>
